<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="base::head(~{})"></head>
<body>
<div class="main markdown">
    <h1>IconFont 图标</h1>
    <ul class="icon_lists clear" >
        <li th:each="icon,iconState:${icons}">
            <i class="icon iconfont" th:utext="${icon.code}" th:onclick="showCode([[${icon.code}]])"></i>
            <div class="name" th:text="${icon.name}"></div>
            <div class="code" th:text="${icon.code}"></div>
        </li>
    </ul>
    <h2 id="unicode-">Unicode引用</h2>
    <hr>
    <p>Unicode是字体在网页端最原始的应用方式，特点是：</p>
    <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        <li>上面只是部分图标，需要更多图标可以参考<a href="https://unicode-table.com/cn/">Unicode®字符百科</a></li>
    </ul>
    <blockquote>
        <p>注意：新版Iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
    </blockquote>

    <h3 id="-">挑选相应图标并获取字体编码，应用于页面</h3>
    <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span
            class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span
            class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

    <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
    </blockquote>
</div>
<script>
    $(function() {
        // $('#close').on('click', function(code) {});
    });
    function showCode(code) {
        layer.msg(code);
    }
</script>

</body>

<style type="text/css">

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /*
    KISSY CSS Reset
    理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
    2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
    3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
    特色：1. 适应中文；2. 基于最新主流浏览器。
    维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
     */

    /** 清除内外边距 **/
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
    pre, /* text formatting elements 文本格式元素 */
    form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
    th, td /* table elements 表格元素 */
    {
        margin: 0;
        padding: 0;
    }

    /** 设置默认字体 **/
    body,
    button, input, select, textarea /* for ie */
    {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
    }

    address, cite, dfn, em, var {
        font-style: normal;
    }

    /* 将斜体扶正 */
    code, kbd, pre, samp {
        font-family: courier new, courier, monospace;
    }

    /* 统一等宽字体 */
    small {
        font-size: 12px;
    }

    /* 小于 12px 的中文很难阅读，让 small 正常化 */

    /** 重置列表元素 **/
    ul, ol {
        list-style: none;
    }

    /** 重置文本格式元素 **/
    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }


    /** 重置表单元素 **/
    legend {
        color: #000;
    }

    /* for ie6 */
    fieldset, img {
        border: 0;
    }

    /* img 搭车：让链接里的 img 无边框 */
    button, input, select, textarea {
        font-size: 100%;
    }

    /* 使得表单元素在 ie 下能继承字体大小 */
    /* 注：optgroup 无法扶正 */

    /** 重置表格元素 **/
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* 清除浮动 */
    .ks-clear:after, .clear:after {
        content: '\20';
        display: block;
        height: 0;
        clear: both;
    }

    .ks-clear, .clear {
        *zoom: 1;
    }

    .main {
        padding: 30px 100px;
        width: 960px;
        margin: 0 auto;
    }

    .main h1 {
        font-size: 36px;
        color: #333;
        text-align: left;
        margin-bottom: 30px;
        border-bottom: 1px solid #eee;
    }

    .helps {
        margin-top: 40px;
    }

    .helps pre {
        padding: 20px;
        margin: 10px 0;
        border: solid 1px #e7e1cd;
        background-color: #fffdef;
        overflow: auto;
    }

    .icon_lists {
        width: 100% !important;

    }

    .icon_lists li {
        float: left;
        width: 100px;
        height: 180px;
        text-align: center;
        list-style: none !important;
    }

    .icon_lists .icon {
        font-size: 42px;
        line-height: 100px;
        margin: 10px 0;
        color: #333;
        -webkit-transition: font-size 0.25s ease-out 0s;
        -moz-transition: font-size 0.25s ease-out 0s;
        transition: font-size 0.25s ease-out 0s;

    }

    .icon_lists .icon:hover {
        font-size: 100px;
    }


    .markdown {
        color: #666;
        font-size: 14px;
        line-height: 1.8;
    }

    .highlight {
        line-height: 1.5;
    }

    .markdown img {
        vertical-align: middle;
        max-width: 100%;
    }

    .markdown h1 {
        color: #404040;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 24px;
    }

    .markdown h2,
    .markdown h3,
    .markdown h4,
    .markdown h5,
    .markdown h6 {
        color: #404040;
        margin: 1.6em 0 0.6em 0;
        font-weight: 500;
        clear: both;
    }

    .markdown h1 {
        font-size: 28px;
    }

    .markdown h2 {
        font-size: 22px;
    }

    .markdown h3 {
        font-size: 16px;
    }

    .markdown h4 {
        font-size: 14px;
    }

    .markdown h5 {
        font-size: 12px;
    }

    .markdown h6 {
        font-size: 12px;
    }

    .markdown hr {
        height: 1px;
        border: 0;
        background: #e9e9e9;
        margin: 16px 0;
        clear: both;
    }

    .markdown p,
    .markdown pre {
        margin: 1em 0;
    }

    .markdown > p,
    .markdown > blockquote,
    .markdown > .highlight,
    .markdown > ol,
    .markdown > ul {
        width: 80%;
    }

    .markdown ul > li {
        list-style: circle;
    }

    .markdown > ul li,
    .markdown blockquote ul > li {
        margin-left: 20px;
        padding-left: 4px;
    }

    .markdown > ul li p,
    .markdown > ol li p {
        margin: 0.6em 0;
    }

    .markdown ol > li {
        list-style: decimal;
    }

    .markdown > ol li,
    .markdown blockquote ol > li {
        margin-left: 20px;
        padding-left: 4px;
    }

    .markdown code {
        margin: 0 3px;
        padding: 0 5px;
        background: #eee;
        border-radius: 3px;
    }

    .markdown pre {
        border-radius: 6px;
        background: #f7f7f7;
        padding: 20px;
    }

    .markdown pre code {
        border: none;
        background: #f7f7f7;
        margin: 0;
    }

    .markdown strong,
    .markdown b {
        font-weight: 600;
    }

    .markdown > table {
        border-collapse: collapse;
        border-spacing: 0px;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 95%;
        margin-bottom: 24px;
    }

    .markdown > table th {
        white-space: nowrap;
        color: #333;
        font-weight: 600;

    }

    .markdown > table th,
    .markdown > table td {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left;
    }

    .markdown > table th {
        background: #F7F7F7;
    }

    .markdown blockquote {
        font-size: 90%;
        color: #999;
        border-left: 4px solid #e9e9e9;
        padding-left: 0.8em;
        margin: 1em 0;
        font-style: italic;
    }

    .markdown blockquote p {
        margin: 0;
    }

    .markdown .anchor {
        opacity: 0;
        transition: opacity 0.3s ease;
        margin-left: 8px;
    }

    .markdown .waiting {
        color: #ccc;
    }

    .markdown h1:hover .anchor,
    .markdown h2:hover .anchor,
    .markdown h3:hover .anchor,
    .markdown h4:hover .anchor,
    .markdown h5:hover .anchor,
    .markdown h6:hover .anchor {
        opacity: 1;
        display: inline-block;
    }

    .markdown > br,
    .markdown > p > br {
        clear: both;
    }


    .hljs {
        display: block;
        background: white;
        padding: 0.5em;
        color: #333333;
        overflow-x: auto;
    }

    .hljs-comment,
    .hljs-meta {
        color: #969896;
    }

    .hljs-string,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-strong,
    .hljs-emphasis,
    .hljs-quote {
        color: #df5000;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-type {
        color: #a71d5d;
    }

    .hljs-literal,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-attribute {
        color: #0086b3;
    }

    .hljs-section,
    .hljs-name {
        color: #63a35c;
    }

    .hljs-tag {
        color: #333333;
    }

    .hljs-title,
    .hljs-attr,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo {
        color: #795da3;
    }

    .hljs-addition {
        color: #55a532;
        background-color: #eaffea;
    }

    .hljs-deletion {
        color: #bd2c00;
        background-color: #ffecec;
    }

    .hljs-link {
        text-decoration: underline;
    }

    pre {
        background: #fff;
    }

    .iconfont {
        cursor:pointer;
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
</html>
